<template>
    <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=35 :canDrag=false>
        <template v-slot:fix>
            <div style="height:35px;border:1px solid #CCC;padding:3px">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple"> <span class="remind_class">设备维护保养、校准计划执行</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div style="line-height:30px">
                            <el-checkbox v-model="chkshowall" true-label="1" false-label="0">显示全部</el-checkbox>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div style="line-height:25px">
                            <el-button @click.native="btnExeMaintPlan">执行维护计划</el-button>
                            <el-button style="width:72px" @click.native="btnSkip">跳过</el-button>
                            <el-button style="width:72px" @click.native="btnRefresh">刷新</el-button>
                            <el-button @click.native="btnLookExeRecord">查看执行记录</el-button>
                            <el-button style="width:72px" @click.native="btnClose">退出</el-button>
                        </div>
                    </el-col>
                </el-row>
                <!-- <span class="remind_class">设备维护保养、校准计划执行</span>
                &nbsp;&nbsp;&nbsp;
                <el-checkbox v-model="chkshowall" true-label="1" false-label="0">显示全部</el-checkbox>
                &nbsp;&nbsp;
                <el-button @click.native="btnExeMaintPlan">执行维护计划</el-button>
                <el-button style="width:72px" @click.native="btnSkip">跳过</el-button>
                <el-button style="width:72px" @click.native="btnRefresh">刷新</el-button>
                <el-button @click.native="btnLookExeRecord">查看执行记录</el-button>
                <el-button style="width:72px" @click.native="btnClose">退出</el-button> -->
            </div>
        </template>
        <div style="height:100%">
            <vxe-table show-overflow ref="xTable" :data.sync="list" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow highlight-current-row resizable header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" key="1" :row-class-name="rowclassname" class="mytable-style" @current-change="currentChangeEvent" :loading="loading">
                <vxe-table-column field="devicename" title="所属设备" width="120"></vxe-table-column>
                <vxe-table-column field="planname" title="计划名称" width="100"></vxe-table-column>
                <vxe-table-column field="plantypename" title="计划类别" width="60"></vxe-table-column>
                <vxe-table-column field="periodnum" title="执行" width="50" align="center"></vxe-table-column>
                <vxe-table-column field="periodunitname" title="间隔" width="50" align="center"></vxe-table-column>
                <vxe-table-column field="effectivetime" title="有效期至" width="120"></vxe-table-column>
                <vxe-table-column field="nextruntime" title="下一次运行时间" width="120"></vxe-table-column>
                <vxe-table-column field="lastruntime" title="最后执行时间" width="120"></vxe-table-column>
                <vxe-table-column field="description" title="备注" width="150"></vxe-table-column>
                <vxe-table-column field="firstruntime" title="首次执行时间" width="120"></vxe-table-column>
                <vxe-table-column field="devmaintplanid" title="维护计划ID" width="80" align="center"></vxe-table-column>
                <vxe-table-column field="overtimeflag" title="超时标志" width="60" align="center">
                    <template v-slot="{row}">{{row.overtimeflag=="1"?"待执行":""}}</template>
                </vxe-table-column>
            </vxe-table>
        </div>
        <!--设备保养计划自动提醒-->
        <el-dialog :append-to-body="true" width="1000px" title="设备保养计划自动提醒" :visible.sync="exemaintplandialog" v-el-drag-dialog :close-on-click-modal="false">
            <div style="height:400px;" :key="devobj.plankey">
                <rm-handexe :tableobj="devobj.tableobj" :formobj="devobj.formobj" :devmaintobj="devobj.devmaintobj" :devmainobj="devobj.devmainobj" @change="devhandexeChange"></rm-handexe>
            </div>
        </el-dialog>
        <!--查看执行记录-->
        <el-dialog :append-to-body="true" width="900px" title="计划执行情况" :visible.sync="lookexerecorddialog" v-el-drag-dialog :close-on-click-modal="false">
            <div style="height:400px;" key="1">
                <rm-layout-right splitcolor="white" movingcolor="#00ffff" :splitwidth=5 :fixsize=300>
                    <template v-slot:fix>
                        <div style="height:100%">
                            <vxe-table show-overflow ref="rxTable" :data.sync="lookexerecord.rightRecordData" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow highlight-current-row resizable header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" :loading="lookexerecord.rightloading">
                                <vxe-table-column field="maintcontent" title="执行内容" width="200"></vxe-table-column>
                                <vxe-table-column field="maintresult" title="执行结果" width="100"></vxe-table-column>
                            </vxe-table>
                        </div>
                    </template>
                    <div style="height:100%;width:100%;">
                        <vxe-table show-overflow ref="lxTable" :data.sync="lookexerecord.leftRecordData" height="auto" width="100%" border size="mini" :select-config="{ reserve: true }" show-header-overflow highlight-current-row resizable header-align="center" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, showIcon: false }" @current-change="LookRecordChangeEvent">
                            <vxe-table-column field="maintusername" title="维护人" width="60" align="center"></vxe-table-column>
                            <vxe-table-column field="maintdt" title="维护时间" width="120"></vxe-table-column>
                            <vxe-table-column field="description" title="备注" width="160"></vxe-table-column>
                            <vxe-table-column field="username" title="记录人" width="60" align="center"></vxe-table-column>
                            <vxe-table-column field="createdt" title="记录时间" width="120" align="center"></vxe-table-column>
                        </vxe-table>
                    </div>
                </rm-layout-right>
            </div>
        </el-dialog>
    </rm-layout-top>

</template>

<script type="text/javascript">
export default {
    name: "rm_devalertinfo",
    props: {
        tabledata: { type: Array },
    },
    data() {
        return {
            chkshowall: "0",
            devplandata: this.tabledata,
            devobj: { formobj: {}, tableobj: [], plankey: 0, devmaintplanid: 0, nextruntime: "", overtimeflag: "0",devmaintobj:{}, },
            exemaintplandialog: false,
            loading: false,
            //以下为计划执行情况查询所用字段
            lookexerecorddialog: false,
            lookexerecord: {
                rightRecordData: [],
                leftRecordData: [],
                devmaintid: 0,
                rightloading: false,
            },
        };
    },
    created() {},
    computed: {
        list() {
            let filterName = this.chkshowall.trim();
            if (filterName == "0") {
                let rest = this.devplandata.filter((item) => item.overtimeflag == "1");
                return rest;
            } else {
                return this.devplandata;
            }
        },
    },
    watch: {
        chkshowall(val) {
            var row = this.$refs.xTable.getCurrentRow();
            if (this.devplandata.length > 0) row = this.devplandata[0];
            if (this.$refs.xTable && !!row) {
                this.selectRow(row);
            } else {
                this.selectRow("");
            }
        },
    },
    mounted() {
        //console.log("devplandata", this.devplandata);
        setTimeout(() => {
            if (this.$refs.xTable && this.tabledata.length > 0) {
                this.selectRow(this.tabledata[0]);
            } else {
                this.selectRow("");
            }
        }, 10);
    },
    methods: {
        //选中行并赋值
        selectRow(row) {
            if (!!row) {
                if (this.$refs.xTable) this.$refs.xTable.setCurrentRow(row);
                this.devobj.devmaintplanid = row.devmaintplanid;
                this.devobj.nextruntime = row.nextruntime;
                this.devobj.overtimeflag = row.overtimeflag;
            } else {
                // if (this.$refs.xTable) this.$refs.xTable.setCurrentRow(null);
                this.devobj.devmaintplanid = "";
                this.devobj.nextruntime = "";
                this.devobj.overtimeflag = "0";
            }
        },
        //获取自动提醒弹窗的选中行
        currentChangeEvent({ row, column }) {
            if (row) {
                this.selectRow(row);
            } else {
                this.selectRow("");
            }
        },
        //自动提醒弹窗列表的颜色
        rowclassname({ row, column }) {
            if (row.overtimeflag == "1") {
                return "row-pink";
            }
        },
        //执行维护计划查询
        btnExeMaintPlan() {
            let date = this.devobj.nextruntime;
            //这里也可以用overtimeflag判断
            var curDate = new Date();
            var nextDate = new Date(date);
            if (nextDate > curDate) {
                this.$alert("当前任务应该执行日期为：" + date + "(未到期)，您是否现在就要提前执行？", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" })
                    .then(() => {
                        this.OpenExeaintMaintPlan();
                    })
                    .catch(() => {
                        //取消
                    });
            } else {
                this.OpenExeaintMaintPlan();
            }
        },
        OpenExeaintMaintPlan() {
            this.$tool
                .request({
                    url: "ucent/devalert",
                    method: "post",
                    data: {
                        action: "handexeobj",
                        devmaintplanid: this.devobj.devmaintplanid,
                    },
                })
                .then((res) => {
                    if (res) {
                        this.devobj.formobj = res.formdata[0];
                        this.devobj.tableobj = res.tabledata;
                        this.devobj.devmaintobj = res.devmaint;
                        this.devobj.devmainobj = res.devmain;
                        this.devobj.plankey++;
                        this.exemaintplandialog = true;
                    }
                })
                .catch((e) => {
                    this.$alert(e, "提示");
                });
        },
        //执行维护计划保存
        devhandexeChange(scuflag, data) {
            if (scuflag == "success") {
                this.$pub.message(this, "计划执行成功！", "success");
                this.exemaintplandialog = false;
                this.btnRefresh();
            } else {
                this.exemaintplandialog = false;
            }
        },
        //跳过选中的维护计划
        btnSkip() {
            let _this = this;
            this.$confirm("您确定要跳过该执行计划吗？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    _this.$tool
                        .request({
                            url: "ucent/devalert",
                            method: "post",
                            data: {
                                action: "SkipExePlan",
                                devmaintplanid: _this.devobj.devmaintplanid,
                            },
                        })
                        .then((res) => {
                            if (res.errcode == "1") {
                                _this.$pub.message(_this, "已跳过该执行计划！", "success");
                                if (_this.devobj.overtimeflag == "1") _this.btnRefresh();
                                else _this.tempDelCurRow(_this.devobj.devmaintplanid);
                            } else {
                                _this.$alert(res.errmsg, "提示");
                            }
                        })
                        .catch((e) => {
                            _this.$alert(e, "提示");
                        });
                })
                .catch(() => {
                    //取消
                });
        },
        //如果选中数据未超期，页面暂时删除当前行
        tempDelCurRow(devmaintplanid) {
            // let data=this.$refs.xTable.tableData;
            // let row=data.find(m=>m.devmaintplanid==devmaintplanid);
            let data = this.$table.DelRecordSelect(this.$refs.xTable, -1, this);
        },
        //刷新维护计划
        btnRefresh() {
            this.loading = true;
            this.$tool
                .request({
                    url: "ucent/devalert",
                    method: "post",
                    data: {
                        action: "showdevplanlist",
                    },
                })
                .then((res) => {
                    this.devplandata = res.data;
                    if (this.$refs.xTable && this.list.length > 0) {
                        this.selectRow(this.list[0]);
                    } else {
                        this.selectRow("");
                    }
                    this.loading = false;
                })
                .catch((e) => {
                    this.$alert(e, "提示");
                    this.loading = false;
                });
        },
        //查看执行计划
        btnLookExeRecord() {
            this.$tool
                .request({
                    url: "ucent/devalert",
                    method: "post",
                    data: {
                        action: "LookExeRecord",
                        devmaintplanid: this.devobj.devmaintplanid,
                    },
                })
                .then((res) => {
                    if (res) {
                        this.lookexerecord.leftRecordData = res.ldata;
                        this.lookexerecord.rightRecordData = res.rdata;
                        this.lookexerecorddialog = true;
                        setTimeout(() => {
                            if (this.$refs.lxTable && res.ldata.length > 0) this.$refs.lxTable.setCurrentRow(res.ldata[0]);
                        }, 10);
                    }
                })
                .catch((e) => {
                    this.$alert(e, "提示");
                });
        },
        LookRecordChangeEvent({ row, column }) {
            this.queryLookRecordRight(row.devmaintid);
        },
        //查看执行计划右边列表的显示
        queryLookRecordRight(devmaintid) {
            this.lookexerecord.rightloading = true;
            this.$tool
                .request({
                    url: "ucent/devalert",
                    method: "post",
                    data: {
                        action: "queryLookRecordRight",
                        devmaintid: devmaintid,
                    },
                })
                .then((res) => {
                    if (res) {
                        this.lookexerecord.rightRecordData = res.data;
                        this.lookexerecord.rightloading = false;
                    }
                })
                .catch((e) => {
                    this.$alert(e, "提示");
                    this.lookexerecord.rightloading = false;
                });
        },
        //退出
        btnClose() {
            this.$emit("change", "close");
        },
    },
};
</Script>

<style scoped>
.remind_class {
    color: rgb(236, 11, 11);
    font-size: 18px;
}
/deep/.mytable-style .vxe-body--row.row-pink {
    background-color: pink;
    color: rgb(8, 8, 8);
}
</style>